<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input type="" value="" v-model="firstname" />+
  <!-- <input type="" value="" v-model="middletname" />+ -->
  <input type="" value="" v-model="lastname" />=
  <input type="" value="" v-model="fullname" />

  <p>fullname:{{fullname}}</p>
  <p>fullname:{{fullname}}</p>
  <p>fullname:{{fullname}}</p>
  <p>methodsToFullname:{{methodsToFullname()}}</p>
  <p>methodsToFullname:{{methodsToFullname()}}</p>
  <p>methodsToFullname:{{methodsToFullname()}}</p>
  <p>name:{{name}}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      firstname: '',
      middletname: '',
      lastname: '',
    },
    methods: {
      methodsToFullname() {
        console.log("methods:fullname")
        return this.firstname + this.middletname + this.lastname;
      }
    },
    computed: {
      // 在 computed 中这些属性，叫做 【计算属性】，计算属性的本直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；
      fullname: function () {
        console.log("computed:fullname")
        return this.firstname + this.middletname + this.lastname;
      },
      name: {
        get() {
          console.log("computed.name.get被执行了");
          return this.firstname + this.middletname + this.lastname;
        },
        set(value) {
          this.firstname = value[0];
          this.lastname = value.slice(1);
          // setTimeout(() => {
          // 	this.firstname = "一缕清风"
          // }, 1000);
          return true
        }

      }
    }

  })

</script>